<template>
    <!-- 新增底部信息栏 -->
    <div class="info-bar">
        <!-- 信息显示区（上部） -->
        <div class="info-display" v-if="selectedFeature">
            <!-- 选中的要素信息 -->
            <div class="info-block selected-feature" >
                <div class="info-header">
                    <i class="icon-feature"></i>
                    <span>选中要素：{{ selectedFeature.extData.name }}</span>
                </div>
            </div>

            <!-- 坐标/面积/半径信息 -->
            <div class="info-group">
                <div class="info-block coordinate" v-if="selectedFeature.extData.location">
                    <div class="info-header">
                        <i class="icon-location"></i>
                        <span>当前坐标：{{ selectedFeature.extData.location }}</span>
                    </div>
                </div>
                <div class="info-block center" v-if="selectedFeature.extData.center">
                    <div class="info-header">
                        <i class="icon-location"></i>
                        <span>中心坐标：{{ selectedFeature.extData.center }}</span>
                    </div>
                </div>
                <div class="info-block area" v-if="selectedFeature.extData.area">
                    <div class="info-header">
                        <i class="icon-area"></i>
                        <span>边界面积：{{ selectedFeature.extData.area || '0' }} km²</span>
                    </div>
                </div>
                <div class="info-block radius" v-if="selectedFeature.extData.radius ">
                    <div class="info-header">
                        <i class="icon-radius"></i>
                        <span>绘制半径：{{ selectedFeature.extData.radius || '0' }} 公里</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
import { Vue, Prop, Component } from 'vue-property-decorator';

@Component
export default class TopInfoBar extends Vue {
    @Prop() selectedFeature:any = null;


    mounted(){
        console.log(this.selectedFeature);
    }
}
</script>
<style scoped>
.info-bar {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
    background: #fff;
    border-top: 1px solid #e8e8e8;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);

}

.info-display {
    display: flex;
    flex-direction: column;
    gap: 12px;

    transform: translateX(-50%);
    position: absolute;
    pointer-events: none;
}

.info-group {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
}

.info-block {
    background: rgba(245, 247, 250, 0.8);
    padding: 2px 12px;
    border-radius: 4px;
    border: 1px solid #ebeef5;
    flex: 1;
    min-width: 200px;
    position:relative;
}

.info-block.selected-feature {
    background: rgba(64, 158, 255, 0.15);
    border-color: #409eff;
    font-weight: bold;
}

.info-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
}

/* 定位输入区单独一行在底部 */
.location-input {
    display: flex;
    gap: 10px;
    width: 100%;
    margin-top: auto; /* 确保输入框始终在底部 */
    padding-top: 8px;
    border-top: 1px dashed #eee;
}

.location-input .el-input {
    flex: 1;
}

/* 图标样式 */
.icon-feature:before {
    content: "★";
    color: #409eff;
    font-size: 14px;
}
.icon-feature span{
    display: block;
}
.icon-location:before {
    content: "📍";
    font-size: 10px;
}

.icon-area:before {
    content: "▦";
    font-size: 10px;
}

.icon-radius:before {
    content: "⦿";
    font-size: 10px;
}
</style>